<template>
  <div class="mobile_page">
    <Menus :title="name" />
    <div class="mobile-bind">
      <!-- <h1><img src="static/wuhua/img/logo2.svg" width="85%"></h1> -->
      <p class="info">
        <i class="glyphicon glyphicon-info-sign"></i> 为了能及时收到服务反馈信息，请验证您的信息</p>

      <div class="mobile-number">
        <div class="icon">
          <i class="material-icons">phone_android</i>
        </div>
        <input type="tel" name="mobile_number" v-model="mobile_number" placeholder="填写您的手机号码">
        <a href="#" :class="wait==60 ? '' : 'seed'" @click="sendVerifyCode">{{wait==60 ? '获取验证码' : wait+'秒后重试'}}</a>
      </div>
      <div class="verification">
        <div class="icon">
          <i class="material-icons">sms_failed</i>
        </div>
        <input type="tel" name="code" v-model="smsCode" placeholder="填写手机验证码">

      </div>
      <div class="mobile-user" v-if="show_id_card">
        <div class="icon">
          <i class="material-icons">assignment_ind</i>
        </div>
        <input type="text" name="mobile_number" v-model="id_card" placeholder="填写您的身份证号码">
      </div>
      <a @click="handleClick" class="lp-btn large primary">验证</a>
    </div>
    <Dialogs v-model="dialog" />
    <Alert v-if="alert.show" :info="alert.info" :recall="alert.recall" @setClose="value=>alert.show=value" />

  </div>

  <!-- <app-alert v-if="alert.show" :info="alert.info" :recall="alert.recall" @setClose="value=>alert.show=value" /> -->
</template>

<style lang="scss">
.mobile_page {
  padding-top: 160px;
  height: 100%;
  .mobile-bind {
    width: 800px;
    margin: 200px auto 0;
    .info {
      font-size: 22px;
      margin-bottom: 15px;
      color: #808080;
      i {
        color: #e67e22;
      }
    }
    .lp-btn {
      width: 100%;
    }
    .mobile-number,
    .verification,
    .mobile-user {
      margin-bottom: 25px;
      display: flex;
      background: #fff;
      height: 60px;
      line-height: 60px;
      border-radius: 5px;
      border: 1px solid #ccc;
      align-items: center;
    }
    .mobile-number {
      // margin-bottom: 50px;
      a {
        width: 200px;
        background: #3d69bd;
        color: #fff;
        display: block;
        border-radius: 0 5px 5px 0;
        font-size: 22px;
        text-align: center;
      }
    }
    input {
      flex: 1;
      background: none;
      border: 0;
      height: 60px;
      font-size: 22px;
      padding-left: 10px;
    }
    .icon {
      width: 48px;
      height: 60px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #999;
      i {
        font-size: 36px;
      }
    }
  }
}
</style>

<script>
import { checkMobile, checkSMS, isCardNo } from '@/fun.js'
import Menus from '../components/Menu'
import Dialogs from '../components/Dialog'
import Alert from '@/components/Alert'
export default {
  components: {
    Menus,
    Dialogs,
    Alert
  },
  data() {
    return {
      mobile_number: '',
      id_card: '',
      smsCode: '',
      wait: 60,
      name: '用户验证',
      show_id_card: false,
      is_flag: false,
      alert: {
        show: false,
        info: '',
        recall: () => {}
      },
      dialog: {
        show: false,
        title: '',
        cancelBtn: '返回'
      }
    }
  },
  methods: {
    async sendVerifyCode() {
      const ver_mobile = checkMobile(this.mobile_number)
      const code = localStorage.code
      this.is_flag = true
      // const code = this.$getCookie('code')
      if (this.wait !== 60 || !code) return
      // 手机号码错误
      if (!ver_mobile[0]) {
        this.alert.show = true
        this.alert.info = ver_mobile[1]
        return
      }
      const res = await this.$get(
        `/pufa/send/terminal/verify_code/?mobile_number=${this
          .mobile_number}&no=${code}`
      )
      console.log('res', res)
      if (res.status <= 0) {
        this.alert.show = true
        this.alert.info = res.msg
        return
      }

      if (res.status === 2 && res.id_card) {
        this.id_card = res.id_card
      } else {
        this.show_id_card = true
      }
      this.id_card = res.id_card || this.id_card
      this.time()
    },
    async handleClick() {
      const ver_mobile = checkMobile(this.mobile_number)
      const ver_sms = checkSMS(this.smsCode)
      const ver_id = isCardNo(this.id_card)
      const code = localStorage.code

      // 手机号码错误
      if (!ver_mobile[0]) {
        this.alert.show = true
        this.alert.info = ver_mobile[1]
        return
      }
      // 验证码错误
      if (!ver_sms[0]) {
        this.alert.show = true
        this.alert.info = ver_sms[1]
        return
      }

      if (!this.is_flag) {
        this.alert.show = true
        this.alert.info = '请先点击获取验证码！'
        return
      }

      // 身份证号码
      if (!ver_id[0]) {
        this.alert.show = true
        this.alert.info = ver_id[1]
        return
      }

      const res = await this.$get(
        `/pufa/check/terminal/verify_code/?mobile_number=${this
          .mobile_number}&id_card=${this.id_card}&verifycode=${this
          .smsCode}&no=${code}`
      )
      console.log('res2', res)
      if (res.status <= 0) {
        this.alert.show = true
        this.alert.info = res.msg
        return
      }

      if (res.status > 0) {
        this.alert.show = true
        this.alert.info = '信息验证成功!'
        this.alert.recall = () => {
          window.location.href = `${this.url}&id_card=${this
            .id_card}&mobile_number=${this.mobile_number}`
        }
      }
    },
    time() {
      if (this.wait === 0) {
        this.wait = 60
      } else {
        this.wait--
        setTimeout(() => this.time(), 1000)
      }
    }
  },
  created() {
    console.log(this.$route.params.url)
    this.url = this.$route.params.url
  }
}
</script>

